<template>
	<el-dialog class="share_dialog" width="1000px" :show-close="false" :visible.sync="dialogVisible">
		<div v-loading="loading">
			<h3 class="text-center">分享商品</h3>
			<div class="flex align-center goods_info">
				<el-image style="width: 60px; height: 60px" :src="goodsData.imgurl">
					<div slot="error" class="image-slot">
						<i class="el-icon-picture-outline" />
					</div>
				</el-image>
				<div class="flex-1 text-left info">
					<p class="color-999">{{ goodsData.id }}</p>
					<p class="color-666">{{ goodsData.title }}</p>
				</div>
			</div>
			<div class="flex">
				<div class="text-center item_wrap" style="margin-right:20px">
					<p class="text-center title">分享二维码</p>
					<el-image :src="goodsData.qrcode_url">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline" />
						</div>
					</el-image>
					<p>右键点击复制图片</p>
				</div>
				<div class="item_wrap" style="margin:0 20px">
					<p class="text-center title" style="margin-bottom:20px">分享海报</p>
					<div class="poster">
						<div v-show="!posterImg" id="posterHtml" class="poster">
							<div class="img_wrap">
								<img class="w-100" style="width: 350px" :src="goodsData.imgurl" alt="">
							</div>
							<div class="flex align-center justify-between info">
								<div class="flex-1 left">
									<p>{{ goodsData.title }}</p>
									<p class="red-font" style="margin-top:15px">{{ goodsData.min_price }}/天</p>
								</div>
								<div class="right">
									<img style="width:50px" :src="goodsData.qrcode_url" alt="">
								</div>
							</div>
						</div>
					</div>
					<img style="z-index: 100;" :src="posterImg">
					<p style="margin-top:20px"></p>
				</div>
				<div class="item_wrap">
					<p class="text-center title">小程序链接</p>
					<p>{{ goodsData.alipay_url }}</p>
					<div id="qrcode" ref="qrcode"></div>
				</div>
			</div>
			<p class="text-center color-999" style="margin-top:20px">您可以通过以上三种方式分享至微信群、QQ群或发微博</p>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		goodsShare
	} from '@/api/goods'
	import html2canvas from 'html2canvas'
	var qrcode=require("../../../assets/js/reqrcode")

	export default {
		props: {
			goodsId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				dialogVisible: false,
				// goodsId: null,
				goodsData: {},
				loading: false,
				posterImg: '' // 最终生成的海报图片
			}
		},
		watch: {
			dialogVisible(val) {
				if (val) {
					this.getData()
				} else {
					// 清空数据
					this.posterImg = ''
					this.goodsData = {}
				}
			}
		},
		methods: {
			createPoster() {
				setTimeout(() => {
					// 生成海报
					html2canvas(document.getElementById('posterHtml'), {
						useCORS: true, // （图片跨域相关）
						allowTaint: false // 允许跨域（图片跨域相关）
					}).then(canvas => {
						this.posterImg = canvas.toDataURL()
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}, 1000)
			},
			getData() {
				this.loading = true
				console.log(this.goodsId);
				goodsShare(this.goodsId).then(res => {
					console.log(res, '123');
					this.goodsData = res || {}
					this.createPoster()

				}).catch(() => {
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.share_dialog {
		/deep/.el-dialog__header {
			display: none;
		}

		/deep/.el-dialog__body {
			padding-top: 30px;
		}
	}

	.goods_info {
		margin: 30px 0;
		padding: 10px;
		border: 1px solid #e6e6e6;
		border-radius: 3px;

		p {
			line-height: 20px;
		}

		.info {
			margin-left: 20px;
		}
	}


	.flex {
		display: flex;
	}

	.item_wrap {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		padding: 25px 30px;
		background: #f5f5f5;
		border-radius: 3px;

		.title {
			color: #000000;
			font-weight: bold;
		}
	}

	.poster {
		background-color: #ffffff;

		.img_wrap {
			border-bottom: 1px solid #e6e6e6;
		}

		.info {
			padding: 5px 10px;
		}
	}
</style>
